<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            position: absolute;
        }
        #msg{
            width: 100px;
            height: 50px;
            position: absolute;
            top:10px;
            left: 10px;
            color:#f00;
            font-size: 50px;
            z-index: 999;
        }
        #gg{
            width: 200px;
            height: 200px;
            background-color: #fed;
            position: absolute;
            top:20%;
            left:30%;
            font-size: 30px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>其它事件</h1>
    <hr>
    
    <p oncopy="copy()">日赵香炉生紫烟,遥看瀑布挂前川....</p>
    
    <input type="text" oncut="cut()" value="请剪切我!">
    <p id="ts"></p>
    <input type="text" onpaste="paste()" placeholder="请粘贴在此处">


    <br>
    <hr>
    <br>

    <h1>播放/暂停/停止 音/视频</h1>
    <font id="info" size="7" color="red">操作信息: </font><br>
    
    <audio controls onplay="b()" onpause="z()" onended="t()">
        <source src="./media/we will rock you.mp3" type="audio/mpeg">
        浏览器不支持 audio  标签元素
    </audio>

    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>



    <div id="box">
        <video id="vv" controls onplay="bf()" onpause="zt()" onended="tz()" width="600">
            <source src="./media/Shanghai.E-motion.mp4" type="video/mp4">
            浏览器不支持 video  标签元素
        </video>
        <div id="msg">操作</div>
        <div id="gg">我是广告位 <br> 猛戳立即购买</div>
    </div>



    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>


    <script>
    // - oncopy   拷贝内容时触发
    function copy() {
        alert('已复制成功!');
    }
    // - oncut    剪切内容时触发
    function cut() {
        ts.innerHTML = '剪切成功了';
    }
    // - onpaste  粘贴内容时触发
    function paste() {
        ts.innerHTML = '粘贴成功了';
    }


    // onplay   音/视频开始播放时触发(audio/video)
    function b() {
        info.innerHTML = '开始';
    }
    // onpause  音/视频暂停时触发(audio/video)
    function z() {
        info.innerHTML = '暂停';
    }
    // onended  音/视频播放结束时触发(audio/video)
    function t() {
        info.innerHTML = '停止';
    }


    function bf() {
        msg.innerHTML = '开始';
    }
    function zt() {
        msg.innerHTML = '暂停';
    }
    function tz() {
        msg.innerHTML = '停止';
    }

    vv.onclick = function() {
        if (vv.paused) {
            vv.play();
            gg.style.display = 'none';
        } else {
            vv.pause();
            gg.style.display = 'block';
        }
    }

    </script>
</body>
</html>